5.3 Posting the access token

Once you have an access token, you can post the token to the embedded Operator Client screen, and you are automatically authenticated to that screen until the token expires. If you pass an expired or invalid token, you can authenticate using the Sign In option.

Sample code for posting the token:

Copy 
<html>
  <head>
    <script>
    function applyToken() {
        document.getElementById("OCFrame").src = document
        .getElementById("link")
        .value.replace("#/", "#/embedded/");
        document.getElementById("OCFrame").contentWindow.postMessage({
        token: document.getElementById("token").value,
        });
    }
    </script>
    <style>
    #OCFrame {
      border: 3px solid blue;
      width: 80%;
      height: 90%;
    }
    #link,
    #token {
      margin: 2px;
      width: 900px;
    }
    </style>
  </head>
  <body>
    This is Operator Client embedded in an iframe:<br />
    <iframe
    id="OCFrame"
    src=https://react.domain31.local/myid/operatorclient/#
    ></iframe>
    <br />Token: <input type="text" id="token" />
    <br />URL:
    <input
    type="text"
    id="link"
    value=""
    />
    <br />
    <input type="button" value="Apply" onclick="applyToken()" />
  </body>
</html>

When you click Apply, this simple example sets the location of the iframe to the URL you provided in the form. The code automatically adds /embedded to the URL after the # to hide the category and search panels.

It then takes the token you provided, and uses postMessage to pass the token to the embedded Operator Client screen, automatically authenticating you, assuming the access token is valid.

Important: The postMessage method allows cross-origin communication between window objects (for example, between a window and its embedded iframe) and you are encouraged to review the security guidelines for this scenario; for example:

developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

You must make sure that this page is on the same server as MyID.